<template>
  <div class="body">
    <header class="header">
      <div class="title">
        <img src="../../assets/images/01_11.png" alt="" class="img_zuo" @click="fanhui"/>
        <div>{{title}}监督检查计划</div>
      </div>
    </header>
    <div class="contents">
      <van-tabs v-model="active">
        <van-tab title="重点检查计划">
          <table style="border-collapse: collapse;border: none;" class="zhongdian">
            <tbody v-for="(item,index) of listzd">
              <tr>
                <td colspan="3" class="td_title">{{item.mc}}</td>
              </tr>
              <tr v-for="(v,ind) of item.child">
                <td width="40%" @click="btn('zd',v)">{{v.sqname}}</td>
                <td width="40%">{{v.month}}</td>
                <td width="20%">
                  <img v-show="!v.state" src="../../assets/images/jg.gif" />
                  <!-- <img src="../../assets/images/jsd.gif" /> -->
                </td>
              </tr>
            </tbody>
          </table>
        </van-tab>
        <van-tab title="一般检查计划">
          <table style="border-collapse: collapse;border: none;" class="zhongdian">
            <tbody v-for="(item,index) of listyb">
              <tr>
                <td colspan="3" class="td_title">{{item.mc}}</td>
              </tr>
              <tr v-for="(v,ind) of item.child">
                <td width="40%" @click="btn('yb',v)">{{v.sqname}}</td>
                <td width="40%">{{v.month}}</td>
                <td width="20%">
                  <img v-show="!v.state" src="../../assets/images/jg.gif" />
                  <!-- <img src="../../assets/images/jsd.gif" /> -->
                </td>
              </tr>
            </tbody>
          </table>
        </van-tab>
        <van-tab title="随机抽查计划">
          <table class="suiji">
           <tbody>
            <tr v-for="(v,index) of listsj">
              <td>{{parseMonth(v.month)}}</td>
              <td @click="btn('sj',v)">{{v.number}}</td>
              <td><img v-show="isOldMonth(v.month)&&(!v.state)" src="../../assets/images/jg.gif" /></td>
            </tr>
           </tbody>
          </table>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        userId: 0,
        active: 0,
        jd_id:null,
        sq_id:null,
        listzd:[],
        listyb:[],
        listsj:[],
        title:''
      };
    },
    watch:{
      active(type){
        this.getDataObj(type);
      }
    },
    beforeRouteLeave(to, from, next) {
        //设置路由的 meta
        if(!(to.path=='/jdjc_jcdx'||to.path=='/jdjc_list')){
          localStorage.removeItem("list_scrollTop");
        }
        next();
    },
    //进入该页面时，用之前保存的滚动位置赋值
    beforeRouteEnter (to, from, next) {
        next(vm => {
          var list_scrollTop = localStorage.getItem("list_scrollTop")?JSON.parse(localStorage.getItem("list_scrollTop")):null;
          if(list_scrollTop||list_scrollTop===0){
            $('.contents').animate({scrollTop: list_scrollTop}, 0);
          }else{
            vm.userId = localStorage.getItem('userId')
            var jdjc_table_active = sessionStorage.getItem("jdjc_table_active")?JSON.parse(sessionStorage.getItem("jdjc_table_active")):{};
            vm.active= (jdjc_table_active.active||jdjc_table_active.active===0)?jdjc_table_active.active:0;
            vm.jd_id = (jdjc_table_active.jd||jdjc_table_active.jd===0)?jdjc_table_active.jd:null;
            vm.sq_id = (jdjc_table_active.sq||jdjc_table_active.sq===0)?jdjc_table_active.sq:null;

            var jdjc_title=sessionStorage.getItem("jdjc_title");
            var jdjc_table_title=sessionStorage.getItem("jdjc_table_title");
            if(jdjc_table_title||jdjc_table_title===0){
              vm.title = jdjc_table_title;
            }else{
              vm.title = (jdjc_title||jdjc_title===0)?jdjc_title:'渝中区';
            }
            vm.getDataObj(vm.active);
          }
          localStorage.removeItem("list_scrollTop");
          localStorage.removeItem("list_light");
        })
    },
    methods: {
      fanhui(){
        var rank=  sessionStorage.getItem("jdjc_wd_fanhui_push");
        sessionStorage.removeItem("jdjc_table_active");
        // this.$router.push(rank);
        this.$router.back()
      },
      btn(type,v){
        var jdjc_table_active = sessionStorage.getItem("jdjc_table_active")?JSON.parse(sessionStorage.getItem("jdjc_table_active")):{};
        jdjc_table_active.active = this.active;
        sessionStorage.setItem("jdjc_table_active",JSON.stringify(jdjc_table_active));
        localStorage.setItem("list_scrollTop",$('.contents').scrollTop());
        var list_light = (!v.state)?'未完成':'完成';
        localStorage.setItem("list_light",list_light);
        if(type=='zd'){
          var id = (v.id||v.id===0)?v.id:'';
          var jdjc_jcdx_params = {
            id:id,
            roomId:v.roomId,
            type:1
          };
          localStorage.setItem("jdjc_jcdx_params",JSON.stringify(jdjc_jcdx_params));
          this.$router.push("/jdjc_jcdx");
        }else if(type=='yb'){
          var id = (v.id||v.id===0)?v.id:'';
          var jdjc_jcdx_params = {
            id:id,
            roomId:v.roomId,
            type:2
          };
          localStorage.setItem("jdjc_jcdx_params",JSON.stringify(jdjc_jcdx_params));
          this.$router.push("/jdjc_jcdx");
        }else if(type=='sj'){
          var jdjc_params = {
            from:'/jdjc_wd',
            type:3,
            dwId:this.jd_id,
            sqId:this.sq_id,
            month:v.month
          };
          localStorage.setItem("jdjc_params",JSON.stringify(jdjc_params));
          this.$router.push("/jdjc_list");
        }
      },
      parseMonth(month){
        var str = '';
        if(month){
          str = (month*1)+'月';
        }
        return str;
      },
      isOldMonth(month){
        var result = false;
        if(month||month===0){
          month = month*1;
        }else{
          month = 0;
        }
        var now = new Date();
        if(month<(now.getMonth()+1)){
          result = true;
        }
        return result;
      },
      getDataObj(active){
        var _this = this;
        try {
          plus.nativeUI.showWaiting("正在加载...");
        } catch (e) {
          console.log('plus问题');
        }
        console.log('active',active);
        var url = '';
        var params = {};
        //测试
        //_this.jd_id = 16146;
        var dwId = null;
        if(_this.jd_id||_this.jd_id===0){
          dwId = _this.jd_id;
        }
        if(_this.sq_id||_this.sq_id===0){
          dwId = _this.sq_id;
        }
        if(active===0){
          url = '/SupervisionExamine/selectSupervision';
          params = {
            userId:_this.userId,
            dwId:dwId,
            categoriesId:1
          };
        }else if(active===1){
          url = '/SupervisionExamine/selectSupervision';
          params = {
            userId:_this.userId,
            dwId:dwId,
            categoriesId:2
          };
        }else if(active===2){
          url = '/SupervisionExamine/selectSupervisionByRandom';
          params = {
            userId:_this.userId,
            dwId:dwId
          };
        }else{
          return;
        }
        _this.axios.get(_this.$global_msg.Url.host + url,{ params }).then(res => {
          console.log(res)
          if(res.data){
            if(active===0){
              var listzd = [];
              for(var key in res.data){
                var obj = {
                  mc:key,
                  child:res.data[key]
                };
                if(obj.child&&obj.child.length>0&&(obj.child[0].mc||obj.child[0].mc===0)){
                  obj.mc = obj.child[0].mc;
                }
                listzd.push(obj);
              }
              _this.listzd = listzd;
            }else if(active===1){
              var listyb = [];
              for(var key in res.data){
                var obj = {
                  mc:key,
                  child:res.data[key]
                };
                if(obj.child&&obj.child.length>0&&(obj.child[0].mc||obj.child[0].mc===0)){
                  obj.mc = obj.child[0].mc;
                }
                listyb.push(obj);
              }
              _this.listyb = listyb;
            }else if(active===2){
              _this.listsj = res.data;
            }
          }else{
            _this.listzd = {};
            _this.listyb = {};
            _this.listsj = [];
            _this.$toast('暂无数据');
          }
          _this.$forceUpdate();

          try {
            plus.nativeUI.closeWaiting();
          } catch (e) {
            console.log('plus问题');
          }
        }).catch(err=>{
              _this.$terminal._error(err)
          })

      }

    },
    created() {

    },
    mounted() {
      var _this = this;
      document.body.style.background = "#FFFFFF";


      //物理返回
      // window.addEventListener("popstate", function(){
      //   _this.fanhui();
      // }, false);
    }
  };
</script>
<style scoped>
  .body{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
  }
  .zhongdian td {
    height: 1.1111rem;
    border: 1Px solid #737373;
    padding: 0 0.2778rem;
    text-align: left;
    font-size: 0.3889rem;
  }

  .zhongdian td.td_title {
    text-align: center;
    font-weight: bold;
  }

  .zhongdian td img {
    width: 0.6rem;
    margin: auto;
  }

  .zhongdian {
    text-align: center;
    width: 96%;
    margin-left: 2%;
    margin-top: 0.2rem;
    font-size: 0.35rem;
  }

  .suiji {
    border: 1px solid #ffffff;
    color: #ffffff;
    border-collapse: collapse;
    text-align: center;
    background-color: #7ac0fe;
    width: 96%;
    margin-left: 2%;
    margin-top: 0.2rem;
  }

  .suiji th {
    height: 1.1111rem;
    margin-top: 1.111111rem;
    border: 1px solid #ffffff;

  }

  .suiji td {
    height: 1.1111rem;
    border: 1Px solid #ffffff;
    border-right: none;
    width: 33.33%;
  }
  .suiji td img{
    width: 0.6rem;
    margin: auto;
}

  .contents {
    flex: 1;
    width: 100%;
    overflow-y: scroll;
  }

  .header {
    height: 1.8519rem;
    background: #007aff;
    padding-top: 0.8333rem;
    box-sizing: border-box;
    width: 100%;
    z-index: 20;
    font-size: 0.388888rem;
  }

  .title {
    padding: 0 0.3704rem;
    display: flex;
    align-items: center;
    color: #fff;
    position: relative;
  }

  .title>div {
    width: 100%;
    font-size: 0.4444rem;
    text-align: center;
  }

  .img_zuo {
    width: 0.2593rem;
    height: 0.463rem;
  }
</style>
